DOM manipulating elements
In this tutorial, we will learn how to add and remove html elements.
innerHTML property
The innerHTML property is used to set or get the html of an element.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerHTML Tutorial</title>
</head>
<body>
<div id="message">ReadersBuddy</div>
<script>
let messageElement = document.getElementById("message");
console.log(messageElement.innerHTML); // ReadersBuddy
</script>
</body>
</html>
createElement(), createTextNode() & appendChild() method
The createElement() method is used to create a new element.
let para = document.createElement("p");
This creates a para element.
The createTextNode() method is used to create a text node.
const node = document.createTextNode("Welcomes You.");
The appendChild() method is used to add the element(s) as the last child of the parent node.
const element = document.getElementById("main");
element.appendChild(para);
Example
<!DOCTYPE html>
<html>
<body>
<div id="main">
<p>ReadersBuddy</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("Welcomes You.");
para.appendChild(node);
const element = document.getElementById("main");
element.appendChild(para);
</script>
</body>
</html>
prepend() method
The prepend() method is used to add the node(s) as the first child of a parent node.
Example
<!DOCTYPE html>
<html>
<body>
<div id="main">
<ul>
<li>Home</li>
<li>Product</li>
<li>Orders</li>
</ul>
</div>
<script>
const listElements = document.querySelector('ul');
const list = document.createElement('li');
const textNode = document.createTextNode("About Us");
list.append(textNode);
listElements.prepend(list);
</script>
</body>
</html>
In the above example, the About Us will be added as the first element in the list.
insertBefore() method
The insertBefore() method is used to insert an element node before an other node as the child node of the parent node.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript insertBefore()</title>
</head>
<body>
<ul id="menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
let menu = document.getElementById('menu');
// create a new li node
let liHome = document.createElement('li');
liHome.textContent = 'Home';
// insert a new node before the first list item
menu.insertBefore(liHome, menu.firstElementChild);
</script>
</body>
</html>
The insertBefore() method takes 2 parameter. First paramenter is the new node to be inserted and the second parameter is the node before which the new node is to inserted.
remove() method
The remove() method is used to remove an HTML element.
Example
<!DOCTYPE html>
<html>
<body>
<div id="main">
<p id="heading">ReadersBuddy</p>
<p id="message">Remove Child tutorial</p>
</div>
<script>
const parent = document.getElementById("main");
const message = document.getElementById("message");
message.remove();
</script>
</body>
</html>
This will remove the para element with id message from the DOM tree.
removeChild() method
The removeChild() method is used to remove any HTML element from its parent node.
Example
<!DOCTYPE html>
<html>
<body>
<div id="main">
<p id="heading">ReadersBuddy</p>
<p id="message">Remove Child tutorial</p>
</div>
<script>
const parent = document.getElementById("main");
const child = document.getElementById("message");
parent.removeChild(child);
</script>
</body>
</html>
The above example will remove the para element with id message from the parent node.
replaceChild() method
The replaceChild() method is used to replace an element in the HTML DOM.
Example
<!DOCTYPE html>
<html>
<body>
<div id="main">
<p id="heading">ReadersBuddy</p>
<p id="message">Remove Child tutorial</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("Welcome users!");
para.appendChild(node);
const parent = document.getElementById("main");
const child = document.getElementById("message");
parent.replaceChild(para,child);
</script>
</body>
</html>
The replaceChild() method takes 2 parameters. First parameter is the new node to replace and second parameter is the old child node to be replaced.